<template>
  <div class="dashboard">
    <!-- 上部仪表盘区域 -->
    <div class="gauge-container-wrapper">
      <!-- 温度仪表盘 -->
      <div class="gauge-container">
        <Gauge :title="'温度'" :value="temperature" unit="°C" />
      </div>

      <!-- 湿度仪表盘 -->
      <div class="gauge-container">
        <Gauge :title="'湿度'" :value="humidity" unit="%" />
      </div>

      <!-- 光照仪表盘 -->
      <div class="gauge-container">
        <Gauge :title="'光照'" :value="light" unit="lux" />
      </div>
    </div>

    <!-- 下部折线图区域 -->
    <div class="line-chart-placeholder">
      <!-- 传递历史数据给折线图 -->
      <LineChart
          :temperatureData="temperatureHistory"
          :humidityData="humidityHistory"
          :lightData="lightHistory"
      />
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted } from 'vue';
import Gauge from './components/Gauge.vue';
import LineChart from "@/views/Devices/components/LineChart.vue";
import request from "@/util/request.ts";

// 模拟后端返回的数据
function fetchDashboardData() {
  return new Promise<any>((resolve) => {
    request.get("/api/all-environmental-information/getTen").then(res=>{
      if (res.data.code === '200'){
        console.log(res.data.data)
        setTimeout(() => {
          resolve({
            temperature: res.data.data.temperature,
            humidity: res.data.data.humidity,
            light: res.data.data.lightIntensity,
            temperatureHistory: [22, 23, 25, 24, 23, 22, 21],
            humidityHistory: [60, 62, 61, 63, 60, 59, 58],
            lightHistory: [100, 120, 120, 115, 110, 105, 100],
          });
        }, 1);
      }
    })
 // 模拟1秒延迟
  });
}

export default defineComponent({
  name: 'Dashboard',
  components: {
    LineChart,
    Gauge,
  },
  setup() {
    const temperature = ref(0);
    const humidity = ref(0);
    const light = ref(0);

    const temperatureHistory = ref<number[]>([]);
    const humidityHistory = ref<number[]>([]);
    const lightHistory = ref<number[]>([]);

    // 获取模拟数据
    onMounted(async () => {
      const data = await fetchDashboardData();
      temperature.value = parseFloat(data.temperature.toFixed(1));
      humidity.value = parseFloat(data.humidity.toFixed(1));
      light.value = parseFloat(data.light.toFixed(1));

      temperatureHistory.value = data.temperatureHistory;
      humidityHistory.value = data.humidityHistory;
      lightHistory.value = data.lightHistory;
    });

    return {
      temperature,
      humidity,
      light,
      temperatureHistory,
      humidityHistory,
      lightHistory,
    };
  },
});
</script>

<style scoped>
/* 设置dashboard为一个列布局 */
.dashboard {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100vh; /* 设置为视口高度 */
}

/* 上部分仪表盘区域 */
.gauge-container-wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 三列布局 */
  width: 100%;
  height: 50%; /* 设置为100%以占满父容器 */
}

/* 单个仪表盘的样式 */
.gauge-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%; /* 确保仪表盘占满高度 */
}

/* 下部分折线图区域 */
.line-chart-placeholder {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50%;
}

.placeholder {
  font-size: 24px;
}
</style>
